<template>
    <div>
        <el-form-item prop="caseType">
            <el-checkbox-group class="w-[740px]" v-model="copytype" @change="checkChange">
                <el-checkbox
                    v-for="i in arr"
                    :key="i.value"
                    :label="i.label"
                    :value="i.value"
                ></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-collapse v-model="activeNames">
            <el-collapse-item
                title="商标代理委托书"
                name="1"
                v-if="showarr.includes('商标代理委托书')"
            >
                <el-form :inline="true">
                    <el-form-item label="联系人">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                    <el-form-item label="委托事项">
                        <el-select>
                            <el-option label="商标注册申请" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="but_center">
                    <el-button v-perms="['basic:add']" type="primary" size="small">
                        保存
                    </el-button>
                </div>
            </el-collapse-item>
            <el-collapse-item
                title="马德里商标国际注册代理委托书"
                name="2"
                v-if="showarr.includes('马德里商标国际注册代理委托书')"
            >
                <el-form :inline="true">
                    <el-form-item label="委托事项">
                        <el-select>
                            <el-option label="国际注册申请" value="1"></el-option>
                            <el-option label="后期申请" value="2"></el-option>
                            <el-option label="放弃" value="3"></el-option>
                            <el-option label="转让" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="其他">
                        <el-input></el-input>
                    </el-form-item>
                </el-form>
                <div class="but_center">
                    <el-button v-perms="['basic:add']" type="primary" size="small">
                        保存
                    </el-button>
                </div>
            </el-collapse-item>
            <el-collapse-item
                title="商标评审代理委托书"
                name="3"
                v-if="showarr.includes('商标评审代理委托书')"
            >
                <el-form :inline="true">
                    <el-form-item label="委托人">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                    <el-form-item label="委托人国家">
                        <el-select>
                            <el-option label="中国" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="法定代表人/负责人姓名">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                    <el-form-item label="职务">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                    <el-form-item label="受托人">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                    <el-form-item label="评审事项">
                        <el-select>
                            <el-option label="驳回商标注册申请复审案" value="1"></el-option>
                            <el-option label="商标不予注册复审案" value="2"></el-option>
                            <el-option label="撤销注册商标复审案" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商标类别">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                    <el-form-item label="注册号">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                    <el-form-item label="商标名称">
                        <el-input class="w-[215px]"></el-input>
                    </el-form-item>
                </el-form>
                <span
                    >受托人代理上述评审事宜的权限为：参加《中华人民共和国商标法》及其《实施条例》和《商标评审规则》规定的本案有关评审活动。委托人特别声明包括下列权限：</span
                >
                <el-checkbox-group class="w-[740px]" v-model="jurisdiction">
                    <el-checkbox label="1.承认对方评审请求" value="a" disabled></el-checkbox>
                    <el-checkbox label="2.放弃或者变更评审请求" value="b" disabled></el-checkbox>
                    <el-checkbox label="3.撤回商标评审申请" value="c" disabled></el-checkbox>
                </el-checkbox-group>
                <div class="but_center">
                    <el-button v-perms="['basic:add']" type="primary" size="small">
                        保存
                    </el-button>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const copytype = ref()
const jurisdiction = ref(['1.承认对方评审请求', '2.放弃或者变更评审请求', '3.撤回商标评审申请'])
const activeNames = ['1', '2', '3']
const showarr = ref([''])
const arr = reactive([
    { label: '商标代理委托书', value: 1 },
    { label: '马德里商标国际注册代理委托书', value: 2 },
    { label: '商标评审代理委托书', value: 3 }
])
const checkChange = (i: any) => {
    showarr.value = i
}
</script>

<style scoped>
.but_center {
    display: flex;
    justify-content: center;
    padding: 10px 0px;
}
</style>
